<template>
  <el-dialog
    title="添加管理员"
    @close="handleClose"
    :visible="visible"
    width="60%"
    center
  >
    <el-form :model="formInline" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="用户姓名：" prop="name">
        <el-input v-model="formInline.name" placeholder="请填写用户姓名"></el-input>
      </el-form-item>
       <el-form-item label="登录账号：" prop="account" v-if="show">
        <el-input v-model="formInline.account" placeholder="请填写手机号" maxlength="11" @focus="cancelReadOnly()" :readonly="readonlyInput"></el-input>
      </el-form-item>
       <el-form-item label="登录密码：" :prop="path == 'add' ? 'password' : ''">
        <el-input v-model="formInline.password" placeholder="请填登录密码" show-password @focus="cancelReadOnly()" :readonly="readonlyInput"></el-input>
      </el-form-item>
       <el-form-item label="可管理门店：" prop="merchantIdList">
        <el-select v-model="formInline.merchantIdList" multiple placeholder="请选择">
          <el-option
            v-for="item in shopList"
            :key="item.id"
            :label="item.label"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-right: 30px" @click="handleClose"
          >取消</el-button
        >
        <el-button type="primary" :loading="buttonLoading" @click="submitForm('ruleForm')" v-if="path == 'add'"
          >确认</el-button
        >
        <el-button type="primary" :loading="buttonLoading" @click="submitForm('ruleForm')" v-if="path == 'edit'"
          >确认</el-button
        >
      </el-form-item>
    </el-form>
    
  </el-dialog>
</template>
<script>
// api
import {
  chainUserDetail,
  addChainUser,
  editChainsUser,
  chainusershop,
} from "@/api/chainManagement";
import { string } from 'jszip/lib/support';

export default {
  props: {
    visible: Boolean,
    id: String,
    path: String,
  },
  data() {
    return {
      loading:false,
      formInline: {
        account: "", //登录帐号
        name: "", //用户姓名
        password: "", //密码
        merchantIdList: [],//可管理门店id数组
      },
      show: true,
      readonlyInput: true,
      buttonLoading: false,
      chainId: "", //总店id
      shopList: [],
      rules: {
        name: [
          { required: true, message: '请输入用户姓名', trigger: 'blur' },
        ],
        account: [
          { required: true, message: '请输入登录账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
        ],
        merchantIdList: [
          { required: true, message: '请选择门店', trigger: 'change' }
        ],
        
      }
    };
  },
  created() {
    this.chainId = this.$route.query.id;
    console.log('this.chainId',this.chainId)
    console.log('this.id',this.id)
    this.chainusershop()
    if(this.path == 'edit'){
      this.lookDetail()
      this.show = false
    }else{
      this.formInline = {
        account: "", //登录帐号
        name: "", //用户姓名
        password: "", //密码
        merchantIdList: [],//可管理门店id数组
      }
    }
  },
  methods: {
    cancelReadOnly() {
    this.readonlyInput= false;
    },
    //获取门店下拉框
    chainusershop(){
      var params = {
        chainId: this.chainId
      }
      chainusershop(params).then(res => {
        this.shopList = res.result
      })
    },
    lookDetail() {
      //点击编辑
      let id = this.id;
      chainUserDetail(id).then((res) => {
        this.formInline = res.result;
      });
    },
    clickEdit() {
      //编辑
      const params = {
        name: this.formInline.name,
        password: this.formInline.password,
        merchantIdList: this.formInline.merchantIdList,
        id: this.id,
      };
      this.buttonLoading = true;
      editChainsUser(params)
        .then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
          });
          this.buttomLoading = false;
          this.$emit('success')
          this.handleClose()
        })
        .finally(() => {
          this.buttonLoading = false;
        });
    },
    addChainUser() {
      //新增
      const params = {
        ...this.formInline,
        chainId: this.chainId,
      };
      this.buttonLoading = true;
      addChainUser(params)
        .then((res) => {
          this.$message({
            message: "添加成功",
            type: "success",
            duration: 1500,
          });
          this.buttomLoading = false;
          this.$emit('success')
          this.handleClose()
        })
        .finally(() => {
          this.buttonLoading = false;
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.path == 'add'){
            this.addChainUser() 
          }else if(this.path == 'edit'){
            this.clickEdit()
          }
          
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 260px !important;
}
.el-select {
  width: 100% !important;
}
</style>
